<template>
  <div class="page8">
    <h2 class="wow" style="visibility: visible">主材品牌</h2>
    <div class="swipers wow" style="visibility: visible">
      <swiper
        loop="true"
        @swiper="onSwiper"
        :modules="modules"
        :pagination="pagination"
        @slideChange="onSlideChange"
      >
        <swiper-slide v-for="(item, index) in List" :key="index">
          <div class="wrap">
            <div class="pic" v-for="(value, key) in item" :key="key">
              <img :src="value.image" alt="" />
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination pagin"></div>
      </swiper>
    </div>
  </div>
</template>
  
  <script setup>
import { Pagination, A11y } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import { ref } from 'vue'
const pagination = ref({
  el: '.pagin'
})
const modules = ref([Pagination, A11y])
const List = ref([
  [
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    }
  ],
  [
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    },
    {
      image: '/src/assets/img/matericl/p8_001.png'
    }
  ]
])
const inivalue = ref(0)
const iniswiper = ref(null)
const onSwiper = (swiper) => {
  iniswiper.value = swiper
}

const onSlideChange = (e) => {
  inivalue.value = e.activeIndex
}
</script>
  
  <style>
.cherrypick .page8 .swiper {
  padding-bottom: 1rem;
}
.cherrypick .page8 {
  padding: 1rem 0.3rem;
}

.cherrypick .page8 h2 {
  font-size: 0.56rem;
  font-weight: 700;
  color: #000;
  text-align: center;
  margin-bottom: 0.83rem;
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.cherrypick .page8 .swipers {
  position: relative;
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.cherrypick .page8 .wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.cherrypick .page8 .wrap .pic {
  width: calc(31.3% - 2px);
  margin-right: 3%;
  margin-bottom: 3%;
  border: 1px solid #ee2e2e;
  display: flex;
  align-items: center;
  height: 1.5rem;
}

.cherrypick .page8 .wrap .pic img {
  width: 100%;
}
.cherrypick .page8 .wrap .pic:nth-child(3n) {
  margin-right: 0;
}
</style>